<template>
    <div class="content">
        <!--v-for 放在哪个标签上，就循环（复制）哪个标-->
        <div class="main" v-for="(item,index) in array" :key="index">
            <div class="store">{{item.name}}</div>
            <div class="chartBox">
                <div>转化率 {{item.ratesStr}}</div>
                <el-progress type="circle" :percentage="item.ratesNum" :width="80"></el-progress>
            </div>

        </div>
    </div>
</template>

<script>
    import {getRingChart} from "../../../api/ring_chart_api";

    export default {
        name: "RingChart",
        data() {
            return {
                //json 对象有key和value 组成，俗称：键值对

                //json 数组
                array: []
            }
        },
        created() {
        },

        methods: {
            ringChart(){
                getRingChart().then(res => {
                    let data1 = res.data;
                    let data2 = data1.data;
                    for (let i = 0; i < data2.length; i++) {
                        this.array = data2
                    }
                }).catch(err => {
                    console.error("环形图::", err)
                })
            }
        },

        mounted() {
            this.ringChart()

        }

    }
</script>

<style scoped>
    .content {
        display: flex;
        justify-content: space-between;

    }
    .content .main {
        width: 300px;
    }
    .content .store {
        padding: 15px;
    }

</style>
